<template>
	<qh-page-view :showNavbar="showNavbar" :title="title" :color="color" :titleColor="titleColor" :iconColor="iconColor" :bgColor="bgColor"
		:boxShadow="boxShadow" :position="position" :autoBack="showBack">
		<template slot="page-nav-title">
			<slot name="tabbar-nav-title"></slot>
		</template>
		<view class="tabbar-page-box flex-column">
			<view class="tabbar-page-view-content flex-column" :style="tabbarStyle">
				<slot></slot>
			</view>

			<view class="border-top tabbar-box" v-if='!navigation_status || type == 2' :class="{'box-shadow': tabbarShadow}" :style="tabbarBoxStyle">
				<view class="tabbar-box-content flex-spb-cn">
					<view class="tabbar-item flex-cn-cn" v-for="(item,index) in tabbarList" :key="index" @click="changeTab(index)">
						<view class="tabbar-item-content flex-col-cn-cn">
							<view class="qh-rt-single icon" :class="[selectIndex == index ? 'selected' : '', item.icon]"></view>
							<view class="tabbar-item-text" :class="{'selected': selectIndex == index}">{{item.name}}</view>
							<view class="tabbar-item-badge" v-if="item.badge">{{item.badge > 999 ? '999+' : item.badge}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<qh-bottom-navigation :current="current" @error='navigation_error'></qh-bottom-navigation>
			</view>
		</view>
	</qh-page-view>
</template>

<script>
	export default {
		name: 'qh-tabbar-page-view',
		props: {
			current: {
				type: [Number, String],
				default: 0
			}, //选中的下标
			type: {
				type: [Number, String],
				default: 1
			}, //菜单类型  1商户菜单  2门店菜单
			showNavbar: {
				type: Boolean,
				default: true,
			},
			title: {
				type: String,
				default: '',
			},
			position: {
				type: String,	
				// #ifdef MP-ALIPAY
				default: 'left',
				// #endif
				// #ifdef MP-WEIXIN
				default: '',
				// #endif
			}, //标题位置，默认中间对齐，可选“left”左边
			color: {
				type: String,
				default: '',
			},
			titleColor: {
				type: String,
				default: '',
			},
			iconColor: {
				type: String,
				default: '',
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			boxShadow: {
				type: Boolean,
				default: false,
			},
			tabbarShadow: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				selectIndex: 0,
			}
		},
		computed: {
			navigation_status() {
				return this.$store.navigation_status; // 导航栏状态，true是开启自定义导航栏 false是关闭 
			},
			tabbarStyle() {
				return `--tabbar-height:${this.$store.bottomHeight + 110}rpx`;
			},
			tabbarBoxStyle() {
				return 'height:' + (this.$store.bottomHeight + 110) + 'rpx'
			},
			tabbarList() {
				let tabbarList = this.type == 1 ? this.$store.merTabbarList : this.$store.storeTabbarList;
				if (tabbarList.length) {
					//设置购物车角标
					let _index = tabbarList.findIndex(item => item.current == (this.type == 1 ? 3 : 2));
					if (_index >= 0) {
						let len = this.type == 1 ? this.$store.merShoppingGoodsList.length : this.$store.storeShoppingGoodsList.length;
						tabbarList[_index].badge = len;
					}
					//设置选中状态
					let index = tabbarList.findIndex(item => this.current == item.current);
					if (index >= 0) {
						this.selectIndex = index;
					}

					return tabbarList;
				} else {
					return [];
				}
			},
			showBack() {
				return this.type == 2 && (this.$store.mallPreviewState || this.$store.merHomeState) || this.type == 1 && this.current != 0 ? true : false;
			},
		},
		methods: {
			// 自定义导航栏异常 速速变回之前的导航栏
			navigation_error() {
				this.navigation_status = false;
				this.$store.navigation_status = false;
			},
			changeTab(index) {
				if (index != this.selectIndex) {
					if (this.current == 0) {
						//第一个菜单栏页打开其它菜单栏
						uni.navigateTo({
							url: this.tabbarList[index].page,
						})
					} else if (this.tabbarList[index].current == 0) {
						//打开第一个页面
						let pages = getCurrentPages();
						let len = pages.length;
						if (len >= 2 && ('/' + pages[len - 2].route) === this.tabbarList[0].page) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.reLaunch({
								url: this.tabbarList[index].page,
							})
						}
					} else {
						//非第一个页面相互打开
						uni.redirectTo({
							url: this.tabbarList[index].page,
						})
					}
				}
			},
		},
		async created() {
			await this.$onLaunched;
			if (this.$store.store_id && (this.$store.carStoreId != this.$store.store_id || !this.$store.storeShoppingGoodsList.length) &&
				this.current != (this.type == 1 ? 3 : 2)) {
				this.$mutations.getShopList(this.type);
			}
		},
	}
</script>

<style lang="scss">
	.tabbar-page-box {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.tabbar-page-view-content {
			width: 100%;
			height: 100%;
			// flex: 1;
			overflow-y: auto;
			position: relative;
		}

		.tabbar-box {
			background-color: #FFFFFF;
			border-top: 0.5px solid #E8E8EA;
			position: relative;
			z-index: 100;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;

			&.box-shadow {
				box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
			}

			.tabbar-box-content {
				height: 110rpx;
				width: 100vw;
				// overflow: hidden;

				.tabbar-item {
					flex: 1;
					height: 100%;

					.tabbar-item-content {
						position: relative;
						display: inline-flex;
					}

					.icon {
						font-size: 40rpx;
						color: #333333;
					}

					.tabbar-item-text {
						font-size: 22rpx;
						line-height: 32rpx;
						margin-top: 10rpx;
						color: #333333;
					}

					.selected {
						color: var(--primary-color);
					}

					.tabbar-item-badge {
						position: absolute;
						top: -20rpx;
						right: -16rpx;
						background-color: red;
						font-size: 22rpx;
						line-height: 24rpx;
						color: #fff;
						text-align: center;
						border-radius: 18rpx;
						padding: 4rpx 10rpx;
					}
				}
			}
		}
	}
</style>
